<template>
  <div class="view-wrapper">
    <div class="head">
      <div class="head_boxL">
        <div class="detail_box">
          <span class="txt_one">{{staticInfo.yesterdayNum}} 张</span>
          <span class="txt_tow">昨日活动购卡</span>
        </div>
        <div class="detail_box">
          <span class="txt_one">{{staticInfo.todayNum}} 张</span>
          <span class="txt_tow">今日活动购卡</span>
        </div>
        <div class="detail_box">
          <span class="txt_one">{{staticInfo.totalNum}} 张</span>
          <span class="txt_tow">累计活动购卡</span>
        </div>
      </div>
      <div class="head_boxR">
        <div class="detail_box">
          <span class="txt_one">{{staticInfo.merchantNum}} 家</span>
          <span class="txt_tow">参与活动商家</span>
        </div>
      </div>
    </div>
    <div class="setting">
      <div class="set_head">
        <span>收款活动补贴设置</span>
        <el-button type="primary" v-if="ismodifyShow" @click="getmodify"
          >修改</el-button
        >
        <el-button style="margin: 0 10px" v-if="!ismodifyShow" @click="close"
          >取消</el-button
        >
        <el-button type="primary" v-if="!ismodifyShow" @click="setSetting"
          >保存</el-button
        >
      </div>
      <div class="setting_detail">
        <div class="set_dleft">活动补贴：</div>
        <div class="set_num" v-if="ismodifyShow">
          <span class="numtxt" v-if="activeInfo.subsidyMoney">{{
            activeInfo.subsidyMoney
          }}</span>
          <span class="numtxt" style="margin-right: 4px" v-else>-</span>
        </div>
        <el-input
          v-if="!ismodifyShow"
          v-model="activeInfo.subsidyMoney"
          placeholder="请输入数字"
          type="number"
        ></el-input>
        <span>元</span>
      </div>
      <div class="setting_detail">
        <div class="set_dleft">一个账号在同一家店铺最多可享受：</div>
        <div class="set_num" v-if="ismodifyShow">
          <span class="numtxt" v-if="activeInfo.accountShopLimit">{{
            activeInfo.accountShopLimit
          }}</span>
          <span class="numtxt" style="margin-right: 4px" v-else>-</span>
        </div>
        <el-input
          v-if="!ismodifyShow"
          v-model="activeInfo.accountShopLimit"
          placeholder="请输入数字"
          type="number"
        ></el-input>
        <span>次补贴</span>
      </div>
      <div class="setting_detail">
        <div class="set_dleft">一个账号在平台最多可享受：</div>
        <div class="set_num" v-if="ismodifyShow">
          <span class="numtxt" v-if="activeInfo.acountPlatformLimt">{{
            activeInfo.acountPlatformLimt
          }}</span>
          <span class="numtxt" style="margin-right: 4px" v-else>-</span>
        </div>
        <el-input
          v-if="!ismodifyShow"
          v-model="activeInfo.acountPlatformLimt"
          placeholder="不填写默认不限制"
          type="number"
        ></el-input>
        <span>次补贴</span>
      </div>
      <div class="setting_detail">
        <div class="set_dleft">每日平台限制补贴：</div>
        <div class="set_num" v-if="ismodifyShow">
          <span class="numtxt" v-if="activeInfo.dayPlatformLimit">{{
            activeInfo.dayPlatformLimit
          }}</span>
          <span class="numtxt" style="margin-right: 4px" v-else>-</span>
        </div>
        <el-input
          v-if="!ismodifyShow"
          v-model="activeInfo.dayPlatformLimit"
          placeholder="不填写默认不限制"
          type="number"
        ></el-input>
        <span>次</span>
      </div>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" @click="getAdd">新增参与活动商家</el-button>
      </div>
      <div class="list_search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="店铺名称：">
            <el-input
              placeholder="请输入店铺名称"
              v-model="formInline.shopName"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)" size="small"
            >查看商家</el-button
          >
          <el-button type="danger" @click="setDelete(scope.row)" size="small"
            >停止活动</el-button
          >
        </template>
      </ex-table>
    </div>
    <el-dialog
      title="新增参与活动商家"
      :visible.sync="dialogFormVisible"
      center
    >
      <el-form>
        <el-form-item
          :required="true"
          label="选择参与活动店铺名称："
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="shopvalue"
            filterable
            placeholder="请选择"
            @change="change"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :required="true"
          label="选择参与活动卡名称："
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="cardvalue"
            filterable
            placeholder="请选择"
            @change="cardChange"
          >
            <el-option
              v-for="item in cardOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :required="true"
          label="每日最多补贴："
          :label-width="formLabelWidth"
        >
          <el-input
            placeholder="请输入"
            v-model="limit"
            style="width: 200px"
            class="input-with-select"
          >
          </el-input>
          <span style="margin-left: 10px">次</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看商家" :visible.sync="dialogwatch" center>
      <el-form>
        <el-form-item label="活动店铺名称：" :label-width="formLabelWidth">
          <span>{{ info.shopName }}</span>
        </el-form-item>
        <el-form-item label="活动卡名称：" :label-width="formLabelWidth">
          <span>{{ info.assetName }}</span>
        </el-form-item>
        <el-form-item
          label="每日最多补贴："
          :label-width="formLabelWidth"
          :required="true"
        >
          <el-input
            placeholder="请输入"
            v-model="upLimt"
            style="width: 200px"
            class="input-with-select"
          >
          </el-input>
          <span style="margin-left: 10px">次</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogwatch = false">返 回</el-button>
        <el-button type="primary" @click="getSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// components
import {
  subsidyActivity,
  setActivity,
  shopSelectList,
  assetSelectList,
  addShop,
  shoplist,
  activitymodify,
  activityStop,
  shopStatistics
} from "@/api/operateActive";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      //   activeInfo: {},
      activeInfo: {
        subsidyMoney: "", //活动补贴金额
        accountShopLimit: "", //一个账号在同家店铺最多可享受补贴次数
        acountPlatformLimt: "", //一个账号在平台最多享受补贴次数
        dayPlatformLimit: "", //每日平台限制补贴
      },
      info: {
        shopName: "",
        assetName: "",
        id: "",
      },
      upLimt: "",
      ismodifyShow: true,
      dialogFormVisible: false,
      dialogwatch: false,
      formLabelWidth: "190px",
      shopvalue: "",
      cardvalue: "",
      shopId: "", //店铺id
      assetId: "", //卡资产id
      limit: "", //限制补贴次数
      options: [],
      staticInfo:{},
      cardOption: [],
      loading: false,
      formInline: {
        shopName: "",
      },
      tableData: [],
      tableColumn: [
        { prop: "shopName", label: "参与活动店铺名称" },
        { prop: "assetName", label: "参与活动卡名称" },
        { prop: "maxLimit", label: "每日补贴次数" },
        { prop: "yesterdayNum", label: "昨日活动购卡" },
        { prop: "todayNum", label: "今日活动购卡" },
        { prop: "totalNum", label: "累计活动购卡" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "220",
          fixed: "right",
        },
      ],
    };
  },
  created() {
    this.getStatistics()
    this.getList();
    this.getselectList();
    this.getSubsidy();
  },
  computed: {},
  methods: {
    getmodify() {
      this.ismodifyShow = false;
    },
    close() {
      this.ismodifyShow = true;
      this.getSubsidy();
    },
    getAdd() {
      this.dialogFormVisible = true;
      this.shopId = "";
      this.assetId = "";
      this.limit = "";
      this.shopvalue = "";
      this.cardvalue = "";
    },
    onSubmit() {
      //查询
      console.log(this.formInline);
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.formInline = {};
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getStatistics() {
      //获取补贴活动-统计
      shopStatistics()
        .then((res) => {
          this.staticInfo = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getSubsidy() {
      //获取补贴设置
      subsidyActivity()
        .then((res) => {
          this.activeInfo = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setSetting() {
      //收款活动补贴设置
      var params = {
        ...this.activeInfo,
      };
      setActivity(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.ismodifyShow = true;
          this.getSubsidy();
        }, 1000);
      });
    },
    getselectList() {
      //获取商家列表
      this.loading = true;
      shopSelectList()
        .then((res) => {
          this.options = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    change(e) {
      console.log(e);
      this.cardvalue = "";
      this.shopId = e;
      this.getcardList(e);
    },
    cardChange(e) {
      console.log(e);
      this.assetId = e;
    },
    sumit() {
      //新增活动商家确认 addShop
      if(this.shopId==''){
         this.$message.error('请选择店铺');
         return
      }
      if(this.assetId==''){
         this.$message.error('请选择资产');
         return
      }
      if(this.limit==''){
         this.$message.error('请输入补贴限制次数');
         return
      }
      var params = {
        shopId: this.shopId,
        assetId: this.assetId,
        limit: this.limit,
      };
      addShop(params).then((res) => {
        this.$message({
          message: "添加成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.dialogFormVisible = false;
          this.getList();
        }, 1000);
      });
    },
    getcardList(id) {
      //获取卡列表
      const params = {
        shopId: id,
      };
      assetSelectList(params)
        .then((res) => {
          this.cardOption = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getList() {
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      shoplist(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    lookDetail(e) {
      console.log(e);
      this.dialogwatch = true;
      this.info = e;
      this.upLimt = e.maxLimit;
    },
    getSave() {
      //activitymodify 修改
      this.formInline.shopId = this.id;
      console.log(this.formInline);
      var params = {
        id: this.info.id,
        limit: this.upLimt,
      };
      activitymodify(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.getList();
          this.dialogwatch = false;
        }, 1000);
      });
    },
    getDetail() {
      //停止活动
      govApplyInfo(this.id).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        this.data = result;
        this.uploadimg = res.result.businessLicenseImg;
        this.imageUrl = this.$IMG_URL + "/" + res.result.businessLicenseImg;
      });
    },
    setDelete(row) {
      this.$confirm("你确定要停止" + row.shopName + "店铺活动吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          activityStop(row.id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getList();
              }, 1000);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.head_boxL {
  padding: 10px 0px;
  height: 122px;
  width: 36%;
  border-radius: 8px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#35c2f5),
    to(#00abff)
  );
  background: linear-gradient(180deg, #35c2f5, #00abff);
  box-shadow: 2px 4px 16px 0px rgb(107 201 255 / 60%);
  color: #ffffff;
  display: flex;
  align-items: center;
}
.detail_box {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.txt_one {
  margin-bottom: 10px;
  font-weight: bold;
}
.txt_tow {
  font-weight: bold;
  font-size: 14px;
}

.head_boxR {
  display: flex;
  align-items: center;
  height: 122px;
  padding: 10px 0px;
  width: 12%;
  border-radius: 8px;
  box-shadow: 2px 4px 16px 0px rgb(255 192 107 / 60%);
  color: #ffffff;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffb34b),
    to(#ff9300)
  );
  background: linear-gradient(180deg, #ffb34b, #ff9300);
  margin: 0 40px;
}
.head_boxR .detail_box {
  width: 100%;
}
.setting {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
  margin-top: 20px;
}
.set_head {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 20px;
}
.set_head span {
  margin-right: 30px;
}
.setting_detail {
  display: flex;
  align-items: center;
  padding: 0px 20px 30px;
  color: #333;
  font-size: 15px;
}
.set_dleft {
  color: #333;
  font-size: 15px;
}
.numtxt {
  color: #ff9300;
  margin-right: 8px;
}
.setting_detail .el-input {
  width: 240px;
  margin-right: 8px;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.list_search {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>
